<template>
  <div>
    <el-button type="text" icon="el-icon-plus" size="mini" @click="openDia">添加</el-button>
    <el-dialog
      v-dialogDrag
      ref="dialog"
      :close-on-click-modal="false"
      :visible.sync="dialogFormVisible"
      :before-close="cancel"
      :append-to-body="true"
      title="渠道商选择"
      width="60%"
      @opened="searchHandle"
    >
      <!-- 查询条件 -->
      <el-form ref="searchForm" :model="search" size="mini" label-width="90px">
        <el-row :gutter="6">
          <el-col :xs="24" :sm="12" :md="8">
            <el-form-item prop="DEALER_CODE" label="渠道商代码">
              <el-input v-model="search.DEALER_CODE" placeholder="渠道商代码" clearable />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8">
            <el-form-item prop="DEALER_NAME" label="渠道商名称">
              <el-input v-model="search.DEALER_NAME" placeholder="渠道商名称" clearable />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8">
            <el-form-item prop="DATA_TYPE" label="渠道商类型">
              <r-select
                v-model="search.DATA_TYPE"
                :include-code="dataType"
                :clearable="true"
                type="4508"
                placeholder="请选择"
              />
            </el-form-item>
          </el-col>
          <div style="text-align:right;">
            <el-button type="primary" icon="el-icon-search" @click="searchHandle">查询</el-button>
            <el-button icon="el-icon-refresh" @click="resetForm('searchForm')">重置</el-button>
          </div>
        </el-row>
      </el-form>
      <div class="tableHead">
        <div class="tabletitle">渠道商列表</div>
      </div>
      <BaseTable
        ref="table"
        highlight-current-row
        height="160"
        @chaneg-size="changeSizeHandle"
        @chaneg-page="changePageHandle"
        @current-change="select"
        @selection-change="handleSelectionChange">
        <el-table-column label="序号" type="index" />
        <el-table-column v-if="allowRadio" type="selection" width="40" />
        <el-table-column prop="DEALER_CODE" label="渠道商代码" min-width="100"/>
        <el-table-column prop="DEALER_NAME" label="渠道商名称" min-width="200"/>
        <el-table-column :formatter="filterCode" label="渠道商类型" type="4508" prop="DATA_TYPE" min-width="100"/>
        <!--<el-table-column prop="DEALER_SHORTNAME" label="渠道商简称" min-width="150"/>
        <el-table-column prop="REMARK" label="备注" min-width="150"/>-->
      </BaseTable>
      <div slot="footer" class="dialog-footer" style="text-align:center;">
        <el-button type="text">
          <i class="el-icon-search magnifier" />
        </el-button>
        <el-button type="primary" @click="confirmHandle">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>

    </el-dialog>
  </div>
</template>

<script>
import { queryDealer } from '@/api/part/dms/basedata/baseCommon'
import BaseTable from '@/components/BaseTable'
import rSelect from '@/components/Select/Select'
import formMixins from '@/mixins/formMixins'

export default {
  name: 'SelectDealer',
  components: {
    BaseTable,
    rSelect
  },
  mixins: [formMixins],
  props: {
    dealerName: {
      type: String,
      default: ''
    },
    dataType: {
      type: String,
      default: ''
    },
    allowRadio: {
      type: Boolean,
      default: false
    },
    isShow: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      multipleSelection: [],
      dialogFormVisible: false,
      includeCodeVal: '',
      search: {
        limit: 10,
        pageNum: 1,
        DEALER_CODE: '',
        DEALER_NAME: '',
        DATA_TYPE: '',
        DATA_TYPES: ''
      }
    }
  },
  mounted() {
  },
  methods: {
    searchHandle() {
      const table = this.$refs['table']
      table.wait()
      this.search.DATA_TYPES = this.dataType
      queryDealer(this.search)
        .then(res => {
          table.complete().filData(res)
        })
        .catch(err => {
          table.complete()
        })
    },
    handleSelectionChange(val) {
      if (val == null) {
        this.multipleSelection = []
      } else {
        this.multipleSelection = val
      }
    },
    openDia() {
      this.dialogFormVisible = true
    },
    cancel() {
      this.resetForm('searchForm')
      this.dialogFormVisible = false
    },
    changeDE() {
      this.$emit('getDealerInfo', {})
    },
    select(val) {
      if (val == null) {
        this.multipleSelection = []
      } else {
        this.multipleSelection = val
      }
    },
    confirmHandle() {
      if (this.multipleSelection.length === 0) {
        this.$message({
          type: 'warning',
          message: '请选择数据!'
        })
      } else {
        this.$emit('getDealerInfo', this.multipleSelection)
        this.dialogFormVisible = false
      }
    }

  }
}
</script>

<style scoped>
</style>
